import QtQuick
import QtQuick.Controls

Item {
    property real backWidth : 400    // 整体背景宽度
    property real backHeight : 50       // 整体背景高度

    property real titleWidth : 100    // 标题宽度
    property real titleHeight : 50    // 标题高度
    property real titleSize : 30      // 标题字体大小
    property real titleRaius: 5       // 标题圆角
    property string titleContent      // 标题内容

    property real titleMargin: 0        // 标题与文本的间隔距离

    property real showWidth :300      // 显示内容宽度
    property real showHeight : 50     // 显示内容高度
    property real showSize : 30       // 显示内容字体大小
    property real showRaius: 5        // 显示内容圆角
    property string showContent       // 显示内容
    property string inputContent      // 输入内容

    width: backWidth
    height: backHeight


    Rectangle{
        width: titleWidth
        height: titleHeight
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        color: "transparent"

        Text{
            anchors.centerIn: parent
            font.pixelSize: titleSize
            font.bold: true
            text: titleContent
        }
    }

    Rectangle{
        width: showWidth
        height: showHeight
        anchors.left: parent.left
        anchors.leftMargin: titleWidth
        anchors.verticalCenter: parent.verticalCenter
        border.width: 3
        border.color: showInput.focus ? "gold" : "black"
        radius: 5

        Text{
            id:showText
            anchors.centerIn: parent
            font.pixelSize: showSize
            font.bold: true
            visible: true
            text: showContent
        }

        TextInput{
            id:showInput
            anchors.centerIn: parent
            font.pixelSize: showSize
            font.bold: true
            visible: false

            onEditingFinished: {
                inputContent = showInput.text
                showContent = inputContent
                showInput.visible = false
                showText.visible = true
                showInput.focus = false
            }

        }


        MouseArea{
            anchors.fill: parent

            onClicked: {
                inputContent = showContent
                showInput.visible = true
                showText.visible = false
                showInput.forceActiveFocus()
            }
        }

    }



}
